<script>
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import request from "@/utils/request"
import { getShowImage, handleUrlParams } from "@/utils"

export default {
  name: "partTimeJobList",
  components: { uniLoadMore },
  data() {
    return {
      list: [],
      pagination: {
        current: 1,
        size: 10,
      },
      loadMoreStatusText: "more",
    }
  },
  created() {
    this.resetPaginationRefresh()
  },
  methods: {
    handleUrlParams,
    getShowImage,
    async getList() {
      if (this.loadMoreStatusText === "loading") {
        return
      }
      this.loadMoreStatusText = "loading"
      const data = await request({
        url: "recruitment/getPage",
        data: {
          ...this.pagination,
        },
        errorHandle: true,
      })
      this.list.push(...data.records)
      if (this.list.length >= data.total) {
        this.loadMoreStatusText = "noMore"
      } else {
        this.loadMoreStatusText = "more"
      }
    },
    // 加载下一页
    loadMore() {
      if (this.loadMoreStatusText === "loading" || this.loadMoreStatusText === "noMore") {
        return
      }
      this.pagination.current++
      this.getList()
    },
    // 重置分页并重新加载数据
    resetPaginationRefresh() {
      this.pagination.current = 1
      this.loadMoreStatusText = "more"
      this.list = []
      uni.showLoading({
        title: "加载中",
      })
      this.getList().finally(() => {
        uni.hideLoading()
      })
    },
  },
}
</script>

<template>
  <view class="component">
    <view class="list">
      <view
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="
          () => {
            $uni.navigateTo({
              url: handleUrlParams('/markingCampaign/pages/dailyNews/partTimeJobRecruit/details/index', {
                recruitmentId: item.recruitmentId,
              }),
            })
          }
        "
      >
        <view class="header">
          <!--						标题-->
          <view class="left">
            <!--						招聘标题-->
            <view class="recruitmentTitle">
              <text>{{ item.recruitmentTitle }}</text>
            </view>
          </view>
          <view class="center">
            <!--					急聘标识-->
            <view class="recruit-urgently" v-if="item.isWanted === 1">急聘</view>
            <!--						已结束标识-->
            <view class="recruit-urgently expired" v-else-if="item.isWanted === 2">已结束</view>
          </view>
          <view class="right">
            <!--					招聘价格-->
            <view class="price">{{ item.recruitmentPrice }}</view>
          </view>
        </view>

        <view class="content">
          <!--						发布时间-->
          <view class="publish-time">{{ item.publishTime }}</view>
          <!--						说明-->
          <view class="note">{{ item.recruitmentDescription }}</view>
        </view>

        <view class="footer">
          <!--					标签列表-->
          <view class="label-list">
            <view class="label-item" v-for="label in item.recruitmentTagsList" :key="label">{{ label }}</view>
          </view>
          <!--					查看详情按钮-->
          <view class="view-detail-btn">
            <text>查看详情 &gt;</text>
          </view>
        </view>
      </view>
      <uni-load-more :status="loadMoreStatusText"></uni-load-more>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  > .list {
    > .item {
      padding: 30rpx 0;
      border-bottom: 2rpx solid var(--border-color);
      > .header {
        display: flex;
        align-items: center;
        > .left {
          > .recruitmentTitle {
            font-size: 32rpx;
            //文本只显示一行，溢出加省略号
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            font-weight: bold;
          }
        }
        > .center {
          width: 0;
          flex: 1;
          margin-left: 20rpx;
          > .recruit-urgently {
            padding: 4rpx 10rpx;
            border: 2rpx solid rgba(199, 84, 70, 1);
            border-radius: 10rpx;
            color: rgba(199, 84, 70, 1);
            font-size: 26rpx;
            width: max-content;
						&.expired {
							color: #415058;
							border-color: #415058;
						}
          }
        }
        > .right {
          > .price {
            font-size: 30rpx;
            color: #ff6219;
          }
        }
      }
      > .content {
        margin-top: 10rpx;
        > .publish-time {
          color: #999999;
          font-size: 26rpx;
        }
        > .note {
          font-size: 26rpx;
          margin-top: 10rpx;
          //文本溢出部分自动换行
          word-break: break-all; /* 允许在任意字符间断行 */
          width: 100%;
          color: #666666;
          line-height: 1.5;
        }
      }
      > .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20rpx;
        > .label-list {
          display: flex;
          > .label-item {
            margin-right: 20rpx;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            border: 2rpx solid #ffd658;
            padding: 6rpx 16rpx;
            font-size: 26rpx;
            color: #845800;
          }
        }
        > .view-detail-btn {
          font-size: 28rpx;
          color: #ff6600;
        }
      }
    }
  }
}
</style>
